<template>
  <div class="app-container">
    <div style="display: flex">
      <el-menu style="width: 200px; margin-right: 20px" :default-active="1">
        <el-menu-item
          v-for="(item, index) in menu"
          :key="index"
          :index="index"
          @click="handleItemClick(index)"
        >
          <span>{{ item.title }}</span>
        </el-menu-item>
      </el-menu>
      <div v-show="selectedIndex === 0">
        <el-form style="width: 600px" :model="promptParams" ref="queryRef">
          <el-form-item label="提示词设置"></el-form-item>
          <el-form-item label="">
            <el-input
              v-model="promptParams.name"
              style="width: 100%"
              :rows="20"
              type="textarea"
              placeholder="请输入内容"
              show-word-limit
              :maxlength="200"
            />
          </el-form-item>
          <el-form-item label="">
            <div class="_reset">
              <el-button @click="handleSavePrompt()">保存</el-button>
              <el-button type="danger" plain @click="getPrompt()">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="selectedIndex === 1">
        <el-form style="width: 600px" :model="queryParams" ref="queryRef" label-position="left">
          <el-form-item label="默认模型" label-position="left" label-width="200px">
            <el-select
              style="width: 400px"
              v-model="queryParams.name"
              clearable
              fit-input-width
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in aiStore.aiInfo.aiModelConfigs"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自动重置模型" label-position="left">
            <template #label>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="创建新话题时自动重置模型"
                placement="top"
              >
                <div style="margin-top: 5px"
                  >自动重置模型 <el-icon :size="14"> <Warning /> </el-icon>
                </div>
              </el-tooltip>
            </template>
            <div class="_reset">
              <el-switch
                size="large"
                v-model="queryParams.autoReset"
                :active-value="1"
                :inactive-value="0"
              />
            </div>
          </el-form-item>
          <el-form-item label="模型温度" label-position="top">
            <template #label>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="模型生成文本的随机程度。值越大，回复内容越赋有多样性、创造性、随机性；设为 0 根据事实回答。日常聊天建议设置为 0.7"
                placement="top"
              >
                <div style="width: 80px"
                  >模型温度 <el-icon :size="14"> <Warning /> </el-icon>
                </div>
              </el-tooltip>
            </template>

            <div class="_slider" style="width: 100%">
              <el-slider
                v-model="queryParams.temperature"
                :min="0"
                :max="2"
                :step="0.1"
                :marks="marks"
              />
              <el-input-number
                @mousewheel.native.prevent
                :controls="false"
                style="width: 70px; margin-left: 20px"
                v-model="queryParams.temperature"
                :max="2"
                :min="0"
                :step="0.1"
                :precision="1"
                controls-position="right"
              />
            </div>
          </el-form-item>
          <el-form-item label="Top-P" label-position="top">
            <template #label>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="默认值为 1，值越小，AI 生成的内容越单调，也越容易理解；值越大，AI 回复的词汇围越大，越多样化"
                placement="top"
              >
                <div style="width: 80px"
                  >"Top-P <el-icon :size="14"> <Warning /> </el-icon>
                </div>
              </el-tooltip>
            </template>

            <div class="_slider" style="width: 100%">
              <el-slider v-model="queryParams.topP" :min="0" :max="1" :step="0.1" :marks="marks" />
              <el-input-number
                @mousewheel.native.prevent
                :controls="false"
                style="width: 70px; margin-left: 20px"
                v-model="queryParams.topP"
                :max="1"
                :min="0"
                :step="0.1"
                :precision="1"
                controls-position="right"
              />
            </div>
          </el-form-item>
          <el-form-item label="上下文数" label-position="top">
            <template #label>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="要保留在上下文中的消息数量，数值越大，上下文越长，消耗的 token 越多。普通聊天建议 5-10"
                placement="top"
              >
                <div style="width: 80px"
                  >上下文数 <el-icon :size="14"> <Warning /> </el-icon>
                </div>
              </el-tooltip>
            </template>

            <div class="_slider" style="width: 100%">
              <el-slider
                v-model="queryParams.contextLength"
                :min="0"
                :max="20"
                :step="1"
                :marks="marks.contexts"
              />
              <el-input-number
                @mousewheel.native.prevent
                :controls="false"
                style="width: 70px; margin-left: 20px"
                v-model="queryParams.contextLength"
                :max="20"
                :min="0"
                :step="1"
                :precision="0"
                controls-position="right"
              />
            </div>
          </el-form-item>
          <el-form-item label="流式输出" label-position="left">
            <template #label>
              <div style="margin-top: 5px">流式输出</div>
            </template>
            <div class="_reset">
              <el-switch
                size="large"
                v-model="queryParams.streamingOutput"
                :active-value="1"
                :inactive-value="0"
              />
            </div>
          </el-form-item>
          <el-form-item label="思维链长度" label-position="left">
            <template #label>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="该设置仅支持推理模型"
                placement="top"
              >
                <div
                  >思维链长度 <el-icon :size="14"> <Warning /> </el-icon>
                </div>
              </el-tooltip>
            </template>
            <div class="_reset">
              <el-radio-group v-model="queryParams.thoughtChainLength" size="large">
                <el-radio-button :label="1">短</el-radio-button>
                <el-radio-button :label="2">中</el-radio-button>
                <el-radio-button :label="3">长</el-radio-button>
              </el-radio-group>
            </div>
          </el-form-item>

          <el-form-item label="" label-position="left">
            <div class="_reset">
              <el-button @click="handleSubmit()">保存</el-button>
              <el-button type="danger" @click="handleResetData()">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="selectedIndex === 2" style="width: 600px">
        <el-form-item label="预设问题"></el-form-item>
        <el-form-item
          v-for="(i, index) in problemList"
          :key="index"
          :label="`问题${index + 1}`"
          label-position="top"
        >
          <div style="width: 100%; display: flex; align-items: center">
            <el-input
              v-model="i.name"
              style="width: 100%; margin: 0 10px 0 0"
              :rows="2"
              type="textarea"
              placeholder="请输入内容"
              show-word-limit
              :maxlength="20" />
            <el-button
              type="danger"
              plain
              :icon="Minus"
              circle
              @click="handleDelete(i.id)"
            ></el-button
          ></div>
        </el-form-item>
        <div
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          "
        >
          <el-button
            v-show="problemList.length < 6"
            style="margin: 0 0 30px"
            :icon="Plus"
            @click="handleAdd()"
            >添加</el-button
          >
          <div>最多可添加6条</div>
        </div>

        <div class="_reset">
          <el-button @click="handleSaveProblem()">保存</el-button>
          <el-button type="danger" plain @click="getQuestion()">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { Warning, Plus, Minus } from '@element-plus/icons-vue'
import useAiStore from '@/store/modules/ai'
import {
  getModelConfigApi,
  postModelAddOrEditApi,
  getPromptApi,
  postPromptApi,
  putPromptApi,
  getQuestionApi,
  postQuestionApi
} from '@/api/ai/settings'

import { ElMessage } from 'element-plus'

const aiStore = useAiStore()

const menu = [{ title: '提示词设置' }, { title: '模型设置' }, { title: '预设问题' }]
const marks = {
  temperature: {
    0: '0',
    2: '2'
  },
  TopP: {
    0: '0',
    1: '1'
  },
  contexts: {
    0: '0',
    5: '5',
    10: '10',
    15: '15',
    20: '不限'
  }
}

const selectedIndex = ref(1)
const queryParams = reactive({
  id: null,
  name: null,
  autoReset: null,
  temperature: null,
  topP: null,
  contextLength: null,
  streamingOutput: null,
  thoughtChainLength: null
})
/**获取模型数据 */
function getModelConfig() {
  getModelConfigApi(aiStore.aiInfo.id).then((res) => {
    Object.keys(queryParams).forEach((key) => {
      queryParams[key] = res?.data[key] || null
    })

    console.log('queryParams', queryParams)
  })
}
/**模型设置-模型修改*/
function handleSubmit() {
  postModelAddOrEditApi({ ...queryParams, isDefault: 1 }).then((res) => {
    if (res.code === 200) {
      ElMessage({
        message: '修改成功',
        type: 'success'
      })
      getModelConfig()
    }
  })
}
/**重置数据 */
function handleResetData() {
  postModelAddOrEditApi({
    ...queryParams,
    autoReset: 0,
    temperature: 0.6,
    topP: 0.9,
    contextLength: 20,
    streamingOutput: 1,
    thoughtChainLength: 3
  }).then((res) => {
    getModelConfig()
  })
}
// 提示词
const promptParams = reactive({
  id: null,
  name: null
})
/**获取提示词 */
function getPrompt() {
  getPromptApi().then((res) => {
    Object.keys(promptParams).forEach((key) => {
      promptParams[key] = res?.data[key] || null
    })
  })
}
/**保存 */
function handleSavePrompt() {
  if (promptParams.id) {
    putPromptApi(promptParams).then((res) => {
      if (res.code === 200) {
        ElMessage({
          message: '修改成功',
          type: 'success'
        })
        getPrompt()
      }
    })
  } else {
    postPromptApi(promptParams).then((res) => {
      if (res.code === 200) {
        ElMessage({
          message: '修改成功',
          type: 'success'
        })
        getPrompt()
      }
    })
  }
}
// 预设问题
const problemList = ref([])

/**获取预设问题 */
function getQuestion() {
  getQuestionApi().then((res) => {
    problemList.value = res.data ?? []
  })
}

/**保存预设问题 */
function handleSaveProblem() {
  const params = problemList.value.map((i) => {
    return {
      name: i.name
    }
  })
  postQuestionApi(params).then((res) => {
    if (res.code === 200) {
      ElMessage({
        message: '修改成功',
        type: 'success'
      })
      getQuestion()
    }
  })
}
function handleAdd() {
  problemList.value.push({ id: problemList.value.length, name: null })
}
function handleDelete(id) {
  const _index = problemList.value.findIndex((item) => item.id === id)
  problemList.value.splice(_index, 1)
}
const getApi = {
  0: getPrompt,
  1: getModelConfig,
  2: getQuestion
}
/**菜单栏切换触发 */
function handleItemClick(index) {
  console.log(index)
  selectedIndex.value = index
  getApi[index]()
}

getModelConfig()
</script>
<style lang="scss" scoped>
._reset {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}
._slider {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
